<template>
	<div>
		<!--菜单导航-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>考生信息管理</el-breadcrumb-item>
			<el-breadcrumb-item>考生列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!--内容卡片-->
		<el-card class="box-card">
			<!--搜索框-->
			<el-row :gutter="20">
				<el-col :span="5">
					<!--模糊搜索框-->
					<el-input placeholder="请输入查询考生姓名" @clear="select" clearable="" v-model="queryStudent.name"
						class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="select"></el-button>
					</el-input>
				</el-col>
			</el-row>

			<!-- 表格数据  :data代表表数据  border：带有四边框-->
			<el-table :data="Students" border style="width: 100%;">
				<!-- prop：表格当前列的字段名称-->
				<el-table-column type="index" label=""></el-table-column>
				<el-table-column prop="name" align="center" width="80px" label="姓名"></el-table-column>
				<el-table-column label="身份证照片" align="center" width="150px">
					<!--作用域插槽-->
					<template slot-scope="scope">
						<!-- {{scope.row.img}} -->
						<a @click="selectImg(scope.row.img)">
							<el-image style="width: 75px; height: 75px" :src="url+scope.row.img">
							</el-image>
						</a>
						<!--图片放大后的对话框-->
						<el-dialog :visible.sync="dialogVisible">
							<img width="50%" height="50%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</template>
				</el-table-column>
				<el-table-column prop="examId" align="center" label="考生号"></el-table-column>
				<el-table-column prop="idNum" align="center" width="170px" label="身份证号"></el-table-column>
				<el-table-column prop="city" align="center" width="140px" label="报考城市"></el-table-column>
				<el-table-column prop="postName" align="center" width="140px" label="报考岗位"></el-table-column>
				<el-table-column prop="payBoo" align="center" width="100px" label="是否已缴费">
					<template slot-scope="scope">
						<el-tag type="success" v-show="scope.row.payBoo==1">已缴费</el-tag>
						<el-tag type="warning" v-show="scope.row.payBoo==0">未缴费</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="grade" align="center" width="90" label="考生成绩"></el-table-column>
				<el-table-column label="操作" width="90" align="center">
					<template slot-scope="scope">
						<el-tooltip class="item" :enterable="false" effect="dark" content="修改成绩" placement="top">
							<el-button @click="toupdate(scope.row.userId)" type="primary" icon="el-icon-edit"
								size="mini">
							</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<!--分页
					@size-change:当每页显示的条数改变时触发函数
					@current-change：当前页码的改变触发的函数
					current-page：当前页码
					page-sizes：每页显示的条数的数组
					page-size：默认每页显示的条数
					-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryStudent.pageNum" :page-sizes="[1,3,5,10]" :page-size="queryStudent.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total" style="padding:25px 350px;">
			</el-pagination>


			<!--修改的对话框-->
			<el-dialog title="修改考生成绩信息" :visible.sync="updateDialogVisible" width="35%" :before-close="updateReset">
				<!-- 修改用户信息的表单 -->
				<el-form :model="updateStudent" ref="updateStudentRef" label-width="100px">
					<el-form-item label="姓名" prop="name">
						<el-input readonly="readonly" v-model="updateStudent.name"></el-input>
					</el-form-item>
					<el-form-item label="身份证图片" prop="img">
						<el-image style="width: 75px; height: 75px" :src="url+updateStudent.img"></el-image>
					</el-form-item>
					<el-form-item label="考生号" prop="examId">
						<el-input readonly="readonly" v-model="updateStudent.examId"></el-input>
					</el-form-item>
					<el-form-item label="身份证号" prop="idNum">
						<el-input readonly="readonly" v-model="updateStudent.idNum"></el-input>
					</el-form-item>
					<el-form-item label="报考城市" prop="city">
						<el-input readonly="readonly" v-model="updateStudent.city"></el-input>
					</el-form-item>
					<el-form-item label="报考岗位" prop="postName">
						<el-input readonly="readonly" v-model="updateStudent.postName"></el-input>
					</el-form-item>
					<el-form-item label="是否已缴费" prop="payBoo">
						<el-input readonly="readonly" v-show="updateStudent.payBoo==1" value="已缴费"></el-input>
						<el-input readonly="readonly" v-show="updateStudent.payBoo==0" value="未缴费"></el-input>
					</el-form-item>
					<el-form-item required="required" label="考生成绩" prop="grade">
						<el-input v-model="updateStudent.grade"></el-input>
					</el-form-item>
				</el-form>
				<!-- 取消和添加按钮 -->
				<span slot="footer" class="dialog-footer">
					<el-button @click="updateReset">取 消</el-button>&nbsp;
					<el-button type="primary" @click="updateStudentForm">修 改</el-button>
				</span>
			</el-dialog>



		</el-card>
	</div>
</template>

<script>
	import qs from 'qs';
	/*导入城市的插件*/
	import {
		provinceAndCityData,
		CodeToText,
		TextToCode
	} from 'element-china-area-data';
	export default {
		data() {
			//自定义电话的验证规则，value要验证的数据，callback是否成功的回调函数
			var checkPhone = (rule, value, callback) => {
				if (!value) { //value为空时
					return callback(new Error('手机号不能为空'))
				}
				//判断是否符合手机的正则表达式
				var reg = /^[1][0-9]{10}$/
				if (!reg.test(value)) { //满足条件
					return callback(new Error('手机号格式不合法'))
				}
				return callback(); //条件满足
			}
			return {
				//模糊分页查询对象
				queryStudent: {
					name: '',
					pageNum: 1,
					pageSize: 5
				},
				//管理员信息集合
				Students: [],
				//总数居条数
				total: 0,
				//修改对话框
				updateDialogVisible: false,
				updateStudent: {
					name: '',
					examId: '',
					idNum: '',
					city: '',
					postName: '',
					payBoo: '',
					grade: ''
				},
				cityName:'',
				url: 'http://localhost/showImg?filename=',
				//放大框
				dialogVisible: false,
				//图片预览的路径
				dialogImageUrl: '',
				
			}
		},
		methods: {
			//模糊分页查询
			async getStudents() {
				this.Students = [];
				var res = await this.$http.post("selectAllStudent", qs.stringify(this.queryStudent))
				if (res.data.code == 200) {
					this.$message.success(res.data.message)
					//查询数据赋值给powers
					this.Students = res.data.data.records;
					for (var i = 0; i < this.Students.length; i++) {
						this.Students[i].city = CodeToText[this.Students[i].city];
					}
					//获取数据的总条数
					this.total = res.data.data.total;
				} else {
					this.$message.error(res.data.message)
				}
			},
			//改变每页显示的条数
			handleSizeChange(newpageSize) {
				this.queryStudent.pageSize = newpageSize;
				this.getStudents();
			},
			//当前页码改变时触发的函数
			handleCurrentChange(newpageNum) {
				this.queryStudent.pageNum = newpageNum;
				this.getStudents();
			},
			//根据用户名模糊查询
			select() {
				this.queryStudent.pageNum = 1;
				this.getStudents();
			},
			//根据id展示
			async toupdate(userId) {
				//从后端根据id来查询当前用户的信息
				var res = await this.$http.get("selectStudentByUserId?userId=" + userId);
				if (res.data.code == 200) {
					this.updateStudent = res.data.data; //赋予对象
					this.cityName=this.updateStudent.city;
					this.updateStudent.city = CodeToText[this.updateStudent.city];
					this.updateDialogVisible = true; //展示修改的对话框
				} else {
					this.$message.error(res.data.message)
				}
			},
			//修改对话框中的取消事件
			updateReset() {
				this.updateDialogVisible = false; //关闭对话框
				this.$refs.updateAdminRef.resetFields();
			},
			//修改数据的确认按钮
			updateStudentForm() {
				this.$refs.updateStudentRef.validate(async (bo) => {
					if (bo) { //验证通过时 调用
						this.updateDialogVisible = false; //关闭对话框
						this.updateStudent.city=this.cityName;
						var res = await this.$http.post("updateStudent", qs.stringify(this.updateStudent))
						if (res.data.code == 200) { //成功
							this.$message.success(res.data.message),
								//更新页码数据
								this.getStudents();
						} else { //失败
							this.$message.error(res.data.message)
						}

					} else {
						this.$message.error("数据不合法，请检查！")
					}

				})
			},
			//图片展示
			selectImg(img) {
				this.dialogImageUrl = this.url + img;
				this.dialogVisible = true;
			}
		},
		//当前页码加载前执行的代码
		mounted() {
			this.getStudents()
		}
	}
</script>

<style scoped>
	.el-breadcrumb {
		font-size: 16px !important;
		margin: 15px 8px;
		margin-bottom: 20px;
	}

	/deep/.el-table__body-wrapper {
		color: coral;
	}
</style>
